<script setup lang="ts">
const tableData = [
  { id: 1, name: '电影' },
  { id: 2, name: '电视剧' },
  { id: 3, name: '动漫' },
]

const treeData = [
  {
    label: '类型',
    children: [
      {
        label: '动作',
      },
      {
        label: '科幻',
      },
    ],
  },
  {
    label: '地区',
    children: [
      {
        label: '中国',
      },
      {
        label: '美国',
      },
      {
        label: '俄罗斯',
      },
    ],
  },
]

const addEdit_category_dialog = ref(false)
const addEdit_category_formData = ref({
  name: '',
  type: [],
  region: [],
})
</script>

<template>
  <div class="container">
    <div class="content">
      <div class="head">
        <label>分类列表</label>

        <div class="btns">
          <el-button type="primary" @click="addEdit_category_dialog = true">
            新增
          </el-button>
        </div>
      </div>

      <el-table :data="tableData" stripe>
        <el-table-column type="expand" width="50">
          <template #default>
            <el-tree :data="treeData" style="margin-left: 50px;" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="分类" />
        <el-table-column label="操作" width="160">
          <template #default>
            <el-button link type="primary">
              编辑
            </el-button>
            <el-button link type="primary">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="addEdit_category_dialog" class="add_edit-dialog" title="添加分类" width="400">
      <el-form>
        <el-form-item label="分类:">
          <el-input v-model="addEdit_category_formData.name" />
        </el-form-item>

        <el-form-item label=" ">
          <el-tree
            :data="treeData"
            style="width: 100%;"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span class="btns">
                  <el-button type="primary" link>add</el-button>
                  <el-button type="primary" link>delete</el-button>
                </span>
              </span>
            </template>
          </el-tree>
        </el-form-item>

        <div class="btns">
          <el-button type="primary">
            提交
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  inset: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.content {
  width: 100%;
  height: 0;
  flex: 1;
  border-radius: 9px;
  background-color: white;
  padding: 20px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 12%);

  .head {
    display: flex;
    padding-bottom: 10px;

    >label {
      line-height: 2;
      font-size: 16px;
      color: #909399;
      font-weight: 700;
    }

    .btns {
      margin-left: auto;
    }
  }

  .el-table {
    height: calc(100% - 42px);
  }
}

:deep(.add_edit-dialog) {
  width: 400px;

  .el-dialog__body {
    padding-bottom: 20px;
  }

  .el-form {
    .el-form-item {
      .el-form-item__label {
        width: 65px;
        justify-content: center;
      }

      .custom-tree-node {
        flex: 1;
        display: flex;

        .btns {
          margin-left: auto;
        }
      }
    }

    > .btns {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
